<link rel="stylesheet" href="files/css/libs/foundation/foundation.min.css">
<link rel="stylesheet" href="files/css/libs/foundation/app.css">

<script src="files/js/libs/foundation/modernizr.foundation.js" ></script>
<!--<script src="files/js/libs/foundation/jquery.js" ></script>-->


<script>
	
	
	$(document).ready(function(){
		$("#fecha").datepicker({ dateFormat:"yy-mm-dd" , changeYear: true,});
		//$('#fecha').datepicker($.datepicker.regional['']); 
		
		
		var te = $("table.dataTable#Documento");
				
		$(te).bind("rowloaded", function(e, p){
			var obj = p.obj;
			var tr = p.tr;
		
		//$(tr).find("td.actions a.edicion").attr("href", "index.php/admin/evento/edit?idevento="+obj.idevento);
		//$(tr).find("td.actions a.borrado").attr("href", "index.php/admin/evento/delete?ajax=ajax&idevento="+obj.idevento);
		//$(tr).find("td.actions a.detalle").attr("href", "index.php/root/company/detalle?idCompany="+obj.idCompany);
		});
		
		
		//actualizar la tabla al inicio de la carga de la pagina		
			
		//$(te).dataTable();
		
			
	$("a.detail").live("click",function(e){ 
		e.preventDefault();	
		
		var tr = $(this).parents("tr").eq(0);
		var obj = $(tr).data("data");	
		
		var te_detail = $("div#dlgdetail table.dataTable#detaDocumento");
		
		$(te_detail).find(".onload").attr("data-params", "documento:"+obj.documento);	
		$(te_detail).dataTable();
		
		$("div#dlgdetail").dialog("open");
		
	});
		
		
		
		$("input.autocomplete").bind("selected",function(e,p){
		
			e.preventDefault(); 
				//loadClientes();	
			var cliente = p.id; 		
			var fecha= $("#fecha").val();
			
			$(".Mcliente").data("cliente",cliente);
			var nropagina = $("#paginacion").data("nropagina");
			if ( nropagina == undefined ) nropagina = 1;
			
			$("#paginacion").data("nropagina",nropagina);
			
			getData({ url:"admin/reports/gettamaño", data: { ajax:"ajax", cliente:cliente,fecha:fecha }  }, function(response){
				var tam= response.data;
				$(".siguiente").data("tamanio",tam);
			});
			
						
			$(te).find(".onload").attr("data-params", "cliente:"+cliente+","+"fecha:"+fecha+", nropagina:"+nropagina);	
			
			$(".Mcliente").text(p.label);
			$(".Mfecha").text(fecha);
			
			$(te).dataTable();	
			$("div#paginacion").css("display","block");	
			$(".nropagina").text("pagina"+nropagina);
					
			$("div#reporte").css("display","block");		
		});
		
		$("a.anterior").bind("click",function(e){		
			e.preventDefault();
			var cliente = $(".Mcliente").data("cliente"); 		
			var fecha= $("#fecha").val(); 
			var nropagina= $("#paginacion").data("nropagina");
			if(nropagina!=1)
			{
				nropagina=nropagina-1;
				$(te).find(".onload").attr("data-params", "cliente:"+cliente+","+"fecha:"+fecha+", nropagina:"+nropagina);
				$(te).dataTable();	
				$("#paginacion").data("nropagina",nropagina);
				$(".nropagina").text("pagina"+nropagina);	
			}
			
		});
		
		$("a.siguiente").bind("click",function(e){
			e.preventDefault(); 
			var cliente = $(".Mcliente").data("cliente"); 		
			var fecha= $("#fecha").val();
			var nropagina= $("#paginacion").data("nropagina");
			
			var tamanio=$(".siguiente").data("tamanio");
			if(nropagina <=(tamanio/30)+1)
			{
				nropagina=nropagina+1;			
				$(te).find(".onload").attr("data-params", "cliente:"+cliente+","+"fecha:"+fecha+", nropagina:"+nropagina);
				$(te).dataTable();				
				$("#paginacion").data("nropagina",nropagina);
				$(".nropagina").text("pagina"+nropagina);	
			}
		});
	
		$(".clear_input").bind("click",function(e){
			e.preventDefault();
			$("input#cliente").val("");
			$("#paginacion").css("display","none");
			$("#reporte").css("display","none");
			//$(te).dataTable();
		});
		
		
	
	
	
	});	
	
</script>
	
<div class="row" >
	<div class="twelve columns">
	<!--<div id="cabezera" style="margin-left:30px; margin-top: 10px">
		-->	
		<div class="row" style="margin-top: 20px">
			<div class="one columns">
				<h5>Fecha</h5>
			</div>
			<div class="two columns">
				<input type="text" id="fecha" 
					 value="{$fechaActual}" />
			</div>
			<div class="one columns">
				<h5>Cliente</h5>
			</div>
			<div class="three columns">
				<div class="input_x">
					<input class="textbox autocomplete" id="cliente"  type="text" size="50" placeholder="cliente" name="cliente"  
				 	root="response.data" href="admin/cliente/autocompleteclientes" label="nombre" val="cliente"	/>
				</div>
				<a class="clear_input" href="#" to_input="cliente"><img src="files/images/clear.png" 
					style="margin-bottom:21px " /></a>
			</div>
			<div class="five columns">
				<!--<a href="#" class="viewreporte"  >
					<img src="files/images/reporte.jpg" width="35px" height="35px" 
					style="margin-bottom: 19px"/> 
				</a>
				-->
			</div>
				
			<!--<a  style="vertical-align: middle;margin-left:3px; margin-top: 1px" href="#" class="exportar"><img src="files/images/excel.jpg" width="40px" height="45px" /> </a>		
		-->		
		</div>
</div>
</div>	
				
		
<div id="reporte" style="display:none">
			<div class="row">
				<div class="twelve columns">		
					 <h4>Reporte ultimos movimientos</h4> 
				</div>
			</div>
		
			<div class="row" style="margin-bottom:10px ">
		<!--<div style="margin-top: 20px; margin-bottom: 15px">-->
				<div class="six columns">
					<label >Cliente:
						<span class="Mcliente"> </span>
					</label>
				</div>	
				<div class="six columns">
					<label >Desde la fecha:
						<span class="Mfecha">  </span>
					</label> 
				</div>		
			</div>	

	
<div class="row" >
	
		<div class="ten columns">
			<table class="dataTable" id="Documento">
				<thead>
					<tr>			
						<th style="display: none;">
							<a href="admin/reports/consulta1" data-params="" class="onload" root="data" ></a>
						</th>
						
								
						<th style="width:145px; font-size: 12px; height:40px ;text-align:center " >nro Documento</th>
						<th style="width:145px; font-size: 12px; height:40px ;text-align:center" >tipo Documento</th>
						
						<th style="width:145px; font-size: 12px; height:40px;text-align:center " >fecha</th>
						<th style="width:145px; font-size: 12px; height:40px ;text-align:center" >monto Vendido(S/.)</th>
						
						<th></th>
						<!--<th style="width:90px; font-size: 11px; height:40px " >Total</th>
						-->
						
					</tr>
				</thead>
				<tfoot> </tfoot>
				<tbody>
					<tr class="model" data-pk="documento">						
						<td class="documento"> </td>						
						<td class="tipodoc" style="text-align:center"> </td>						
						<td class="fecha" style="text-align:center"> </td>
						<td class="montoV" style="text-align:center"> </td>			
						<td class="actions">					
							<a href="#" class="detail"><img src="files/images/details.png" /></a>
						</td>			
					</tr>
					
				</tbody>
			</table>
			
		</div>		
</div>
</div>

<div class="row">
			
		
	<div id="paginacion" style="display:none">	
		<div class="four columns">
			<a class="anterior"> Anterior</a>
			
		</div> 
		<div class="two columns">
			<label class="nropagina"> </label>
		</div>
		<div class="three columns ">
			<a class="siguiente" style="float:right" > Siguiente</a>
		</div>
		<div class="three columns" > </div>
	</div>	
		
</div>	

<div id="dlgdetail" class="dialog" title="" style="width:150px">
	
		{include file="admin/reports/detailventas.html"}			
	
</div>

	
